import { useSelector } from "react-redux";
import Container from "./Container/Container";
import TopNav from "./TopNav/TopNav";
import ComponentArea from "./ComponentArea/ComponentArea";
const { Header, Footer, Sider, Content } = Layout;





function Editor() {
  const { global:{sliderWidth,topNavHeight}} = useSelector(
    (state) => (state as any).editor.editorConfig
  );
  const headerStyle = {
    height: topNavHeight,
  };
  
  const siderStyle: React.CSSProperties = {
    width:sliderWidth,
  };
  
  const layoutStyle = {
    width: '100vw',
    height: '100vh'
  };
  return (
    <>
      <Layout style={layoutStyle}>
        <Header style={headerStyle}><TopNav></TopNav></Header>
        <Layout>
          <Sider width={siderStyle.width}>
            <ComponentArea></ComponentArea>
          </Sider>
          <Content>
            <Container></Container>
          </Content>
        </Layout>
      </Layout>
    </>
  );
}
export default Editor;
